<template>
  <el-dialog
    title="上传备课结果"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="dialog"
    @open="openDialog"
    width="656px"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="top"
      class="ruleForm"
    >
      <el-form-item label="结果" prop="sumary">
        <el-input
          type="textarea"
          :rows="8"
          resize="none"
          v-model="ruleForm.sumary"
          placeholder="请输入备课结果"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-upload
          v-if="uploadStatus === 'start'"
          class="upload"
          ref="upload"
          action=""
          :show-file-list="false"
          :before-upload="beforeUpload"
        >
          <div class="uploadBtn">点击<span>上传文档</span>，支持word、ppt、pdf</div>
        </el-upload>
        <div v-if="uploadStatus === 'loading'" class="uploadBtn uploadLoading">上传中...</div>
        <div class="uploadName" v-for="(item, index) in ruleForm.fileList" :key="index + 'uploadName'">
          {{ item.fileName }}
          <i class="el-icon-delete deleteIcon" @click="deleteIcon(index)"></i>
        </div>
      </el-form-item>
      <el-form-item label="">
        <el-radio-group v-model="ruleForm.sumaryType">
          <el-radio label="PUBLIC">公开</el-radio>
          <el-radio label="JOIN">参与人可见</el-radio>
          <el-radio label="PRIVATE">仅自己可见</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">
        保 存
      </el-button>
    </span>
  </el-dialog>
</template>
en en
<script>
import { addTeachSummary, getTeachFileList } from '@/api/teach'
import { fileUpload } from '@/api/common';
export default {
  name: 'AddFrom',
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        sumary: '',
        fileList: [
          {
            filePath: '',
            fileName: ''
          }
        ],
        sumaryType: 'PUBLIC'
      },
      rules: {
        sumary: [
          { required: true, message: '请输入备课结果', trigger: 'blur' },
        ],
      },
      uploadStatus: 'start' // start loading
    };
  },
  props: {
    detailsData: {
      type: Object,
      default: null,
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const params = {
            ...this.ruleForm,
            teachId: this.detailsData.objectId,
          }
          await addTeachSummary(params);
          this.$message.success('上传成功');
          this.dialogVisible = false;
          this.$emit('updateData')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 用户点击上传按钮时，不会触发默认上传
    beforeUpload(file) {
      const allowedMimeTypes = [
        'application/pdf',
        'application/msword',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'application/vnd.ms-powerpoint',
        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
      ];
      const isPDF = allowedMimeTypes.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPDF) {
        return this.$message.error('只支持WORD、PPT、PDF格式!');
      } else if (!isLt2M) {
        return this.$message.error('上传文件大小不能超过 2MB!');
      }
      this.uploadFile(file);
      return false; // 阻止默认上传行为
    },

    // 上传
    async uploadFile(file) {
      try {
        this.uploadStatus = 'loading';
        // 创建 FormData 对象
        let formData = new FormData();
        formData.append('file', file); // 'file' 是你服务器端接收上传文件的参数名
        const resData = await fileUpload(formData);
        this.uploadStatus = 'start';
        this.ruleForm.fileList.push({
          fileName: file.name,
          filePath: resData
        })
      } catch (error) {
        console.error(error);
      }
    },
    // 删除
    deleteIcon(index) {
      this.ruleForm.fileList.splice(index, 1);
    },
    // 打开对话框
    async openDialog() {
      const resData = await getTeachFileList({
        relatedId: this.detailsData.objectId
      });
      const fileList = resData.map(item => {
        return {
          fileName: item.fileName,
          filePath: item.filePath
        }
      })
      this.ruleForm = {
        sumary: this.detailsData?.sumary || '',
        fileList: fileList,
        sumaryType: this.detailsData?.sumaryType || 'PUBLIC'
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
  }
  .uploadBtn {
    width: 616Px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid #c6c6c6;
    font-size: 12px;
    font-weight: 400;
    color: $text-color-primary;
    span {
      text-decoration: underline;
    }
  }
  .uploadLoading {
    background: $secondary-color;
  }
  .uploadName {
    color: $text-color;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
    margin-top: 6px;
    background: $secondary-color;
    align-items: center;
    .deleteIcon {
      width: 14px;
      height: 14px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
